<template>
  <div class="app-container warnView">
    <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
      <div style="width: 400px">
        <dept-select width="400px" />
      </div>
    </div>
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="divFlex">
          <SkTotalView />
          <AddMonthView />
          <WfxyView />
          <CqrsView />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="divFlex">
          <QdyjView />
          <NjyjView />
          <JfyjView />
          <MnjcView />
        </div>
      </el-col>
      <el-col :span="6">
        <QjcsView />
        <BfyjView />
        <FWTCView />
        <DxjzView />
      </el-col>
      <el-col :span="6">
        <FxryView />
        <!-- <MessageView /> -->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import SkTotalView from "./components/skTotal.vue";
import AddMonthView from "./components/addMonth";
import WfxyView from "./components/wfxy";
import CqrsView from "./components/cqrs";
import QjcsView from "./components/qjcs";
import QdyjView from "./components/qdyj";
import NjyjView from "./components/njyj";
import JfyjView from "./components/jfyj";
import MnjcView from "./components/mnjz";
import BfyjView from "./components/bfyj";
import FxryView from "./components/fxry";
import FWTCView from "./components/fwtc";
import DxjzView from "./components/dxjz";
import MessageView from "./components/message";
export default {
  components: {
    SkTotalView,
    AddMonthView,
    WfxyView,
    CqrsView,
    QjcsView,
    QdyjView,
    NjyjView,
    JfyjView,
    MnjcView,
    BfyjView,
    FxryView,
    FWTCView,
    MessageView,
    DxjzView,
  },
};
</script>
<style scoped>
.warnView {
  height: calc(100vh - 84px);
  background: rgb(240, 242, 245);
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
}
.divFlex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
